<template>
  <view class="applicable-model">
    <view class="applicable-model-select">
      <uni-section type="line">
          <uni-data-select
            v-model="value"
            :localdata="range"
            @change="change"
          ></uni-data-select>
        </uni-section>
    </view>
    <view class="applicable-model-content">
      <view class="applicable-model-each" 
      v-for="(item,index) in localApplicableModelList" :key="index"
    >
        <text>{{item.brand}}</text>
        <text>{{item.type}}</text>
        <text>{{item.carStartTime}}-{{item.carEndTime}}</text>
        <text>{{item.displacement}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    options: {
    	styleIsolation: 'shared', // 解除样式隔离
    },
    data(){
      return{
        value: -1,
        range: [],
        filterapplicableModeList:[],
        localApplicableModelList:this.applicableModelList,
        tmpApplicableModelList:this.applicableModelList,
      }
    },
    props:{
      applicableModelList:{
        type:Array,
        default:()=>[]
      }
    },
    methods:{
      change(value) {
        console.log("ApplicableModel",value)
        console.log("value",value === '')
        if(value === ''){
          this.localApplicableModelList = this.tmpApplicableModelList
          return 
        }
        console.log("---------------------")
        this.localApplicableModelList = this.tmpApplicableModelList.filter((item)=>{
          console.log("item.brand",item.brand)
          console.log("this.range[value].text",this.range[value].text)
          return item.brand == this.range[value].text
        })
      },
      initData(){
        let brandList = this.localApplicableModelList.map((item)=>item.brand)
        let BrandSet = new Set(brandList)
        brandList = [...BrandSet]
        this.range = brandList.map((item,index)=>{
          return {
            value:index,
            text:item
          }
        })
      },
    },
    created(){
      this.initData()
    },
  }
</script>

<style>
  @import url('../../static/style/eCatalog/applicable-model.css');
</style>